<script lang="ts" setup>
import {reactive, ref} from "vue";
import type {ElForm} from "element-plus";
import {ElMessage} from "element-plus";
import {checkoldPwdAccount, editpassword} from "../../api/user";
import {useRouter} from "vue-router";
import {checkpassword} from "../../utils/utils";

interface PASS {
  oldPwd: string,
  newPwd: string,
  checkPass: string
}

const router = useRouter();
const Modifys = ref<InstanceType<typeof ElForm>>()
const Modify: PASS = reactive({
  oldPwd: '',
  newPwd: '',
  checkPass: ''
})
const rules = reactive({
  oldPwd: [
    {validator: checkpassword, trigger: 'blur'}
  ],
  newPwd: [
    {validator: checkNewPwd, trigger: 'blur'}
  ],
  checkPass: [
    {validator: checkTwicePwd, trigger: 'blur'},
  ]
})

function checkNewPwd(rule: any, value: any, callback: any) {
  if (value === '') callback(new Error('请输入新密码'))
  else if (Modify.oldPwd === value) callback(new Error('新密码不能和旧密码相同'))
  else if (!/^[a-zA-Z0-9_-]{6,12}$/.test(value)) callback(new Error('数字，字母，6到12位'))
  else {
    //如果输入了确认密码 再操作新密码还需要验证一次 确认密码的验证函数
    if (Modify.newPwd !== '') {
      if (!Modifys.value) return
      Modifys.value.validateField('twicePwd', () => null)
    }
    callback()
  }
}

function checkTwicePwd(rule: any, value: any, callback: any) {
  if (value === '') callback(new Error('请输入新密码'))
  else if (value !== Modify.newPwd) callback(new Error('密码不一致'))
  else callback()
}

function passwordAddto(Modifys: InstanceType<typeof ElForm> | undefined) {
  if (!Modifys) return
  Modifys.validate(async (valid) => {
    if (valid) {
      let res = await checkoldPwdAccount({oldPwd: Modify.oldPwd})
      let {code, msg} = res.data
      if (code == '00') {
        let res = await editpassword({newPwd: Modify.newPwd})
        let {code, msg} = res.data
        if (code == 0) await router.push('/login')
        else ElMessage.error(msg)
      } else ElMessage.error(msg)
    }
  })
}

function passwordReset(Modifys: InstanceType<typeof ElForm> | undefined) {
  if (!Modifys) return
  Modifys.resetFields()
}
</script>
<template>
  <div class="accountadd">
    <div class="header">修改密码</div>
    <div class="main">
      <el-form
          :model="Modify"
          :rules="rules"
          ref="Modifys"
          label-width="100px"
          class="demo-Modify"
      >
        <!-- 原密码 -->
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
              type="password"
              v-model="Modify.oldPwd"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="Modify.newPwd" autocomplete="off">
          </el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
              type="password"
              v-model="Modify.checkPass"
              autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 确认按钮 -->
      <div class="btn">
        <el-button size="small" type="primary" @click="passwordAddto(Modifys)"
        >确定
        </el-button
        >
        <!-- 重置按钮 -->
        <el-button size="small" @click="passwordReset(Modifys)">重置</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  line-height: 50px;
  padding-left: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

.main {
  margin-top: 20px;
  padding-left: 30px;
  padding-bottom: 30px;
  width: 400px;

  .btn {
    width: 400px;
    display: flex;
    justify-content: center;
  }
}
</style>